<template>
  <div class="behavior">
    <SSection name="行为">
      <template v-slot:header>
        <div class="tool">
          <i class="tool-add iconfont icon-add" @click="addBehavior"></i>

        </div>
      </template>

      <div>
        <Behavior v-for="(data,key) in behaviors" :key="key" :bundle="key"></Behavior>
      </div>
    </SSection>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import SSection from '@/ui-kit/section/section.vue';
import SButton from '@/ui-kit/button/button.vue';
import { showBehavior } from '../scene/inquirer';
import SProp from '@/ui-kit/prop/prop.vue';
import Behavior from './behavior.vue';
import propertyStore from './store';

export default defineComponent({
  name: 'behaviors',
  components: { Behavior, SProp, SButton, SSection },
  emits: [],
  props: {
    id: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const behaviors = computed(() => {
      return propertyStore().behaviors;
    });

    return {
      behaviors,
      addBehavior() {
        const id = propertyStore().originObjectID;
        showBehavior(id);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.behavior {
  .tool {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    .tool-add {
      cursor: pointer;
    }
  }
}
</style>
